﻿@{
	var reportId = ViewBag.Id == null ? "" : ViewBag.Id;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<title>ActiveReports Web Designer</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">

	<!-- No Virtual Directory -->
	<base href="/">

	<!-- For Virtual Directory -->
	<!--<base href="/VirtualDirectoryName/">-->
	
	<link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css" />
	<link rel="stylesheet" href="jsViewer.min.css" />
	<link rel="stylesheet" href="web-designer.css" />

	<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
	<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
	<link rel="shortcut icon" href="icons/favicon.ico" />

</head>
<body>
	<script src="jsViewer.min.js"></script>
	<script src="web-designer.js"></script>

	<div id="designer-id" style="width: 100%; height: 100%;"></div>

<script>

		var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
		designerOptions.server.url = 'api';
		designerOptions.reportInfo = '@reportId' ? { id: '@reportId' } : null;

		designerOptions.openButton.visible = true;
		designerOptions.saveButton.visible = true;
		designerOptions.saveAsButton.visible = true;
		
		// Used in About dialog and File View Help tab.
		designerOptions.documentation.home = 'https://www.grapecity.com/activereports/docs/v15/online-webdesigner/overview.html';
		// Used in notifications about report items transformation.
		designerOptions.documentation.reportItemsTransformation = 'https://www.grapecity.com/activereports/docs/v14/online-webdesigner/supportedcontrols.html';

		designerOptions.reportItemsFeatures.table.autoFillFooter = true;

		var viewer = null;
        designerOptions.openViewer = function(options) {
        	if (viewer) {
				viewer.openReport(options.reportInfo.id);
				return;
        	}
        	viewer = GrapeCity.ActiveReports.JSViewer.create({
        		locale: options.locale,
        		element: '#' + options.element,
        		reportService: {
        			url: 'api/reporting',
        		},
        		reportID: options.reportInfo.id,
        		settings: {
        			zoomType: 'FitPage'
        		},
        	});
		};

		designerOptions.dataTab.dataSets.canModify = true;
		designerOptions.dataTab.dataSources.canModify = true;

		GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);

	</script>
</body>
</html>
